<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding-bottom: 40px;
            background-color: #fff;
        }

        .form-signin {
            width: 100%;
            max-width: 640px;
            margin: auto;
            padding: 15px;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }

     

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .sr-only2 {
            margin-top: 15px;
        }


        .logodiv img {
            width: 240px;
            margin: 0 auto;
            display: block;
        }

        .logodiv {
            text-align: center;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            color: #03357a;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .logodiv h2 {
            font-size: 1.5rem;
            margin-bottom: 80px;
        }



        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }

        .btn {
            padding: 0.375rem 0.15rem
        }

        .btn-tiqu {
            width: 125px;
            margin: 0 auto;
            display: block;
        }

        .buytitle {
            font-size: 1.1rem;
            color: #03357a;
            margin-top: 20px;
        }

        .buytitle span {
            font-size: 1rem;
            color: #999;
        }

        .action-row button {
            margin-bottom: 15px;
        }

        .buysearch {
            font-size: smaller;
        }

        .formscreen .form-control-theme {
            font-size: smaller;
        }

        .action-row {
            position: fixed;
            width: 100%;
            bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
            background: #fff;
            left: 0;
        }

        .container2 {
            padding: 10px;
            display: block;
            overflow: hidden;
        }

        .bootstrap-select {
            width: calc(100% - 0px) !important;
        }

        .formscreen .filter-option-inner-inner {
            font-size: smaller;
        }

        .myselect {
            width: calc(100% - 0px);
        }

        .btn-action:disabled {
            background: #D9D9DA !important;
            color: #808081 !important;
        }

        .buysearch {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="form-signin form-group1">



            <div class="row   align-items-center">
                <div class="col-12 col-sm-12 col-md-12">
                    <table v-if="print_codes ==undefined" class="table table-borderless">
                        <thead>
                            <tr>
                                <th scope="col">{{print_title}}</th>
                                <!-- <th scope="col">{{lan['Send']}}</th> -->
                                <th width="120" @click="list1_selectall()" style="color: #00b3f6;" scope="col">
                                    {{all1?lan['Un_Select_All']:lan['Select_All']}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,k) in list1" :key="'x'+k">
                                <td>{{print_type == 3 ? item.SerialNumber:item.LabelNum}}</td>
                                <!-- <td><i v-show="item.is_send == false" class="fa fa-square-o" aria-hidden="true"></i>
                                    <i v-show="item.is_send == true" class="fa fa-check-square-o" aria-hidden="true"></i>
                                </td> -->
                                <td>
                                    <div class="custom-control custom-switch">
                                        <input @change="chechange()" type="checkbox" v-model="list1[k].is_check"
                                            class="custom-control-input" :id="'x'+k">
                                        <label class="custom-control-label" :for="'x'+k"></label>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table v-else class="table table-borderless">
                        <thead>
                            <tr>
                                <th scope="col">{{print_title}}</th>
                                <!-- <th scope="col">{{lan['Send']}}</th> -->
                                <th width="120" @click="list1_selectall()" style="color: #00b3f6;" scope="col">
                                    {{all1?lan['Un_Select_All']:lan['Select_All']}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,k) in list2" :key="'x'+k">
                                <td>{{item.LabelNum}}</td>
                                <!-- <td><i v-show="item.is_send == false" class="fa fa-square-o" aria-hidden="true"></i>
                                    <i v-show="item.is_send == true" class="fa fa-check-square-o" aria-hidden="true"></i>
                                </td> -->
                                <td>
                                    <div class="custom-control custom-switch">
                                        <input @change="chechange()" type="checkbox" v-model="list2[k].is_check"
                                            class="custom-control-input" :id="'x'+k">
                                        <label class="custom-control-label" :for="'x'+k"></label>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>







            </div>



            <div style="height:100px;"></div>
            <div class="action-row">
                <div class="container">
                    <div class=" row align-items-center justify-content-center">

                        <div class="col-4 col-md-4">
                            <button type="button" @click="start_print()" tapmode="" :disabled="!print_btn" 
                                class="btn btn-primary btn-action">{{next_print?lan['continue']:lan['Print_Label']}}
                            </button>
                        </div>

                        <div class="col-4 col-md-4">
                            <button type="button" tapmode="" onclick="close_win();"
                                class="btn btn-primary btn-action">{{lan['Cancel']}}
                            </button>
                        </div>

                    </div>

                </div>

            </div>









        </div>





        <div id="mylabel2" class="mylabel2">
            <div id="print_barcode"><svg id="barcode"></svg></div>
            <div  class="row">
                <div class="col-12 labeltxt"><span  class="title print_ShelfNum_title">工单号：</span><span class="print_ShelfNum"></span></div>
                <div class="col-12 labeltxt"><span class="title">批次号：</span><span class="print_LotNum"></span></div>
                <div class="col-12 labeltxt"><span class="title">物料号：</span><span class="print_PartNum"></span></div>
                <div v-if="mode_type == 1">
                    <div class="col-12 labeltxt"><span class="title">版本：</span>{{version}}</div>
                    <div class="col-12 labeltxt"><span class="title">条码：</span><span class="print_LabelNum"></span></div>
                </div>
                <div v-else>
                    <div class="col-12 labeltxt"><span class="title">托码：</span><span class="print_PackageID"></span></div>
                    <div class="col-12 labeltxt"><span class="title">箱码：</span><span class="print_LabelNum"></div>
                </div>
            </div>
           
        </div>


        <div id="mylabel1" class="mylabel1">
            <h5 class="text-center d-flex"><span id="CompanyName">上海xxxx金属制品有限公司</span>
                <img class="printlogo" src="../image/logo2.jpeg">
            </h5>
            <div class="row">
                <div class="col-6 labeltxt"><span class="title">物料号：</span><span class="print_PartNum"></span></div>
                <div class="col-6 labeltxt"><span class="title">工单号：</span><span class="print_JobNum"></span></div>
                <div class="col-12 labeltxt"><span class="title">物料描述：</span><span class="print_OrderNum"></span></div>
                <div class="col-4 labeltxt"><span class="title">数量：</span><span class="print_TranQty"></span></div>
                <div class="col-5 labeltxt"><span class="title">批次号：</span><span class="print_LotNum"></span></div>
                <div class="col-3 labeltxt"><span class="title">版本：</span>{{version}}</div>
                <div id="print_qrcode" class="col-12">
                    <div class="qrcode1" id="qrcode1"></div>
                </div>
                <div class="col-12 labeltxt text-center print_LabelNum">

                </div>
            </div>

        </div>
        <div id="mylabel3" class="mylabel3">

            <div class="row">
                <div class="col-12 labeltxt"><span id="partdesc" class="title print_PartNum">上海xxxx金属制品有限公司</span></div>
                <div class="col-12 labeltxt"><span id="PartDescription" class="title print_PartDescription">上海xxxx金属制品有限公司</span></div>
            </div>
            <div class="print_qrcode" class="col-12">
                <div v-if="mode_type == 4">
                    <svg  style="height:40px" id="barcode4"></svg>
                    <div class=" labeltxt text-center">
                        <span style="display: inline-block;" class="print_LabelNum"> PR-2022-192019013</span>
                        <span style="display: inline-block;margin-left: 10px;" class="print_Text">不合格品标签</span>
                    </div>
                </div>
                <div v-else-if="mode_type == 5">
                    <svg  style="height:40px" id="barcode4"></svg>
                    <div class=" labeltxt text-center">
                        <span style="display: inline-block;" class="print_LabelNum"> PR-2022-192019013</span>
                        <span style="display: inline-block;margin-left: 10px;" class="print_type">DMR-STK</span>
                    </div>
                </div>
                <div v-else-if="mode_type == 6">
                    <svg  style="height:40px" id="barcode4"></svg>
                    <div class=" labeltxt text-center">
                        <span style="display: inline-block;" class="print_LabelNum"> PR-2022-192019013</span>
                        <span style="display: inline-block;margin-left: 10px;" class="print_type">DMR-REJ</span>
                    </div>
                </div>
                <svg v-else id="barcode2"></svg>
            </div>
            <div v-if="mode_type == 4" class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-6 labeltxt"><span class="title">{{lan['Inspector']}}</span><span class="print_User"></span></div>
                        <div class="col-6 labeltxt"><span class="title">检验日期：</span><span class="print_Date"></span></div>
                    </div>
                    <div style="margin-top: 2px;margin-bottom: 2px;" class="row">
                        <div class="col-12 labeltxt"><span class="title">不合格原因：</span><span class="print_Reason"></span></div>
                    </div>
                    <div class="row">
                        <div class="col-6 labeltxt"><span class="title">不合格数量：</span><span class="print_Number"></span><span class="print_Ium"></span></div>
                        <div class="col-6 labeltxt"><span class="title">DMR编号：</span><span class="print_DMR_Code"></span></div>
                    </div>
                </div>
            </div>
            <div v-else-if="mode_type == 5 || mode_type == 6" class="row" >
                <div class="col-12">
                    <div class="row">
                        <div class="col-6 labeltxt"><span class="title">{{lan['WareHouseCode']}}：</span><span class="print_Ware"></span></div>
                        <div class="col-6 labeltxt"><span class="title">{{lan['BinNum']}}：</span><span class="print_Bin"></span></div>
                    </div>
                    <div class="row">
                        <div class="col-6 labeltxt"><span class="title">{{lan['Qty']}}：</span><span class="print_Number"></span><span class="print_Ium"></span></div>
                        <div class="col-6 labeltxt"><span class="title">DMR：</span><span class="print_DMR_Code"></span></div>
                    </div>
                    <div style="margin-top: 1px;" class="row">
                        <div class="col-12 labeltxt"><span class="title">{{lan['REASON_CODE']}}：</span><span class="print_Reason"></span></div>
                    </div>
                    <div style="margin-top: 1px" class="row">
                        <div class="col-12 labeltxt"><span class="title">{{lan['Remark']}}：</span><span class="print_Remark"></span></div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class=" labeltxt text-center print_LabelNum">
                    PR-2022-192019013
                </div>
                <div class="row">
                    <div class="col-12 labeltxt"><span class="title">LOT：</span><span class="print_LotNum"></span></div>
                    <div class="col-6 labeltxt"><span class="title">COO：</span><span class="print_CountryCode_c"></span></div>
                    <div class="col-6 text-right labeltxt"><span class="title">QTY：</span><span class="print_TranQty"></span><span class="print_Ium"></span></div>
    
                </div>
            </div>
           

        </div>


        <div id="mylabel4" class="mylabel4">
            <svg id="barcode3"></svg>
            <div class="row">
                <div class="col-12 labeltxt"><span class="title">工单号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">批次号：</span>006620</div>
                <div class="col-12 labeltxt"><span class="title">物料号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">版本：</span>A</div>
                <div class="col-12 labeltxt"><span class="title">工单号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">批次号：</span>006620</div>
                <div class="col-12 labeltxt"><span class="title">物料号：</span>2022-02399494</div>
                <div class="col-12 labeltxt"><span class="title">版本：</span>A</div>
                <div class="col-12 labeltxt"><span class="title">版本：</span>A</div>

            </div>
            <img class="printlogo2" src="../image/logo.jpeg">
            <div class="qrcode2" id="qrcode2"></div>

        </div>







    </div>
</body>

<script type="text/javascript" src="../script/lang.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/JsBarcode.all.min.js"></script>
<script type="text/javascript" src="../script/qrcode.min.js"></script>
<script type="text/javascript" src="../script/html2canvas.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/printpage.js"></script>
<script type="text/javascript">
    var print_num = 1;
    const app = new Vue({
        el: '#app',
        data: {
            checkkey: 'en-hk',
            all1: 1,
            list1: [],
            print_codes:[],
            mode_type:0,
            print_title:'',
            version: '',
            print_btn:true,
            print_num:1,
            all2:1,
            list2:[],
            next_print:false,
            dyparam: {
                "ip1": "192.168.2.89",
                "port1": 8899,
                "ip2": "192.168.2.89",
                "port2": 8899,
                "mac": "00:07:4D:E5:45:D3",
            },
            dayin: modeldayin,
        },
        mounted() {
            
        },
        methods: {
            reset: function () {
                for (i in this.list1) {
                    this.$set(this.$data.list1[i], 'is_send', false);
                }
                this.chechange();
                if(this.list2.length != 0){
                    for (i in this.list2) {
                        this.$set(this.$data.list2[i], 'is_send', false);
                    }
                    this.chechange2();
                }
            },
            list1_selectall: function () {
                var bl = this.all1 ? false : true;
                for (i in this.list1) {
                    this.$set(this.$data.list1[i], 'is_check', bl);
                }
                this.all1 = bl ? 1 : 0;
                this.chechange();
            },
            list2_selectall: function () {
                var bl = this.all2 ? false : true;
                for (i in this.list2) {
                    this.$set(this.$data.list2[i], 'is_check', bl);
                }
                this.all2 = bl ? 1 : 0;
                this.chechange2();
            },
            chechange: function () {

                var dis = 1;
                this.print_btn = false;
                for (i in this.list1) {
                    if (this.list1[i].is_check) {
                        dis = 0;
                        this.print_btn = true;

                    }
                    if (this.list1[i].is_send) {
                        
                        this.next_print = true;

                    }
                }
                

            },
            chechange2: function () {
                var dis = 1;
                this.print_btn = false;
                for (i in this.list2) {
                    if (this.list2[i].is_check) {
                        dis = 0;
                        this.print_btn = true;

                    }
                    if (this.list2[i].is_send) {
                        
                        this.next_print = true;

                    }
                }

            },
            start_print: function (ptype) {
                print_index = 0;
                print_tags = [];
                var i = 0;
                if(this.list2.length == 0){
                    for (i in this.list1) {
                        if (this.list1[i].is_check && this.list1[i].is_send == false) {
                            if(print_tags.length<9999){
                                print_tags.push(this.list1[i]);
                            }
                            i++;
                        }
                    }
                }else{

                    for (i in this.list1) {
                        if (this.list1[i].is_check && this.list1[i].is_send == false) {
                            if(print_tags.length<9999){
                                print_tags.push(this.list1[i]);
                            }
                            i++;
                        }
                    }

                }
              
                if(print_tags.length == 0){
                    api.toast({
                        msg: "Please reprint!",
                       location: 'middle'
                     });
                     return;

                }


                var ptype = parseInt(api.pageParam.type);
                var num = api.pageParam.print_num?api.pageParam.print_num:1;
                api.prompt({
                    title: lan['Print_Label_Num'],
                    type: 'number',
                    text: num,
                    buttons: [lan['Print_Label'], lan['Cancel']]
                }, function (ret, err) {
                    var index = ret.buttonIndex;
                    if (index == 1) {
                        print_num = parseInt(ret.text);
                        if (print_num > 0) {
                            //if (ajaxing) { return; } 
                            showProgress(lan['Loading']);
                            // startPrint();
                            wificonnect(app.mode_type);

                          

                        }

                    }

                });
            },
        }
    });


    function init_list(){
        var tags = api.pageParam.tags;  
        var codes = api.pageParam.codes || [];
        for(i in tags){
            tags[i].is_check = true;
            tags[i].is_send = false;
            if(tags[i].TranType == "PUR-STK"){
                app.mode_type = 1
            }else if(tags[i].TranType == "INS-DMR"){
                app.mode_type = 4
            }else if(tags[i].TranType == "DMR-STK"){
                app.mode_type = 5
            } else if(tags[i].TranType == "DMR-REJ"){
                app.mode_type = 6
            } else{
                app.mode_type = 0 
            }
            if(print_type == 3){
                var key = "label"+tags[i].SerialNumber;
            }else{
                var key = "label"+tags[i].LabelNum;
            }
            
            keylabel[key] = i;
        }
       
        if(codes.length != 0){
            for(i in codes){
                codes[i].is_check = true;
                codes[i].is_send = false;
            }
        }
      
        app.list1 = tags;
        app.list2 = codes;
        console.log(JSON.stringify(app.list1),33333)
        console.log(JSON.stringify(app.list2),44444)
        console_debug(tags,"init_list");
    }

    apiready = function () {
        api.parseTapmode();
        //back_listen();
        print_type = parseInt(api.pageParam.type);
        app.print_codes = api.pageParam.codes;
        var arr = [lan['Carton_Label'],lan['Palle_Label'],lan['SN_Label']];
       console.log(JSON.stringify(api.pageParam),44444)
      
        app.print_title = arr[print_type-1];
        api.addEventListener({ name: 'navitembtn' }, function (ret, err) {
            if (ret.type == 'left') { api.closeWin({}); }
            if (ret.type == 'right') { app.reset(); }
        });


        init_list();
       
        api.addEventListener({
            name: 'print_connected'
        }, function (ret, err) {
            console_debug(ret, "print_connected");
            if(ret && ret.value && ret.value.sid){
                sid = ret.value.sid;
            }
            api.toast({
          msg: "Ready to print",
          location: 'middle'
        });

        setTimeout(function () {
            startPrint();
  }, 1000)
  /*
            api.alert({
                        title: 'Tips',
                        msg: '连接成功',
                    }, function (ret, err) {
                        startPrint();
                    });
                    */
            
        });
    }

   
</script>

</html>